<template>
  <i-page :loading="api.tableState.loading">
    <template #header>
      <a-page-header title="组织机构列表">
        <div class="d-flex justify-space-between">
          <a-typography-paragraph>
            管理员管理、查看并修改组织机构配置项
          </a-typography-paragraph>

          <div style="position: relative;top: 0;right:40px;height: 120px">
            <img
                class="image"
                :src="TouZi"
                alt="content"
                height="255"
                style="margin-top: -90px"
            />
          </div>

        </div>
      </a-page-header>
    </template>

    <div class="d-flex fill-width fill-height">
      <a-card class="mr-6" :bordered="false" style="width: 500px;" :body-style="{height:'calc(100vh - 500px)',padding:'1px'}">
        <template #title>组织机构树</template>
        <div class="overflow-y-auto px-4 pt-4" style="height: calc(100vh - 360px)">
          <a-tree
              v-model:expandedKeys="state.expandedKeys"
              defaultExpandAll
              :tree-data="state.treeData"
              :fieldNames="{title:'name',key:'id'}"
              @select="onTreeSelect"
          >
          </a-tree>
        </div>
      </a-card>
      <i-sheet class="fill-width" radius shadow>
        <div class="pa-4 d-flex align-center justify-space-between">
          <a-space>
            <a-button plain type="primary" @click="api.onCreate()">创建</a-button>
            <a-button plain icon="" @click="api.refreshTable()">刷新</a-button>
          </a-space>

        </div>
        <a-table
            :data-source="api.tableState.dataSource"
            :loading="api.tableState.loading"
            :pagination="api.tableState.pagination"
            @change="(e:any)=>api.onTableChange(e)"
        >
          <a-table-column key="name" title="名称" data-index="name"/>
          <a-table-column key="name" title="创建时间" data-index="createTime"/>
          <a-table-column key="action" title="操作" :width="200" align="center">
            <template #default="{ record }">
              <a-space class="fill-width">
                <a-button size="small" type="link" text @click="api.onDetail(record.id)">详情</a-button>
                <a-button size="small" text type="link" @click="api.onEdit(record.id)">编辑</a-button>
                <a-button size="small" text type="link" danger @click="api.onDelete(record.id)">删除</a-button>
              </a-space>
            </template>
          </a-table-column>
        </a-table>
      </i-sheet>
    </div>


    <Create :api="api" />
    <Edit :api="api"/>
    <Detail :api="api"/>
  </i-page>
</template>

<script setup lang="ts">
import {onMounted, reactive, watch} from "vue";
import Create from "~/views/system/org/Create.vue";
import Edit from "~/views/system/org/Edit.vue";
import Detail from "~/views/system/org/Detail.vue";
import Img from "~/assets/RzwpdLnhmvDJToTdfDPe.png";
import {OrgApi} from "~/api/system/org.api";
import TouZi from '@/assets/svg/投资者.svg'

const api = new OrgApi();
const state = reactive({
  loading: false,
  treeData: [],
  expandedKeys: []
})

function getTree() {
  state.loading = true
  api.getOrgTree().then(resp => {
    if (resp.ok) {
      state.treeData = resp.data;
      state.treeData.forEach(item => {
        state.expandedKeys.push(item?.id as any)
      })
    }
  }).finally(() => {
    state.loading = false
  })
}

function onTreeSelect(selectedKeys: any, e: { selected: boolean, selectedNodes: any, node: any, event: any }) {
  api.filterTable({pid: e.selected ? e.node.id : undefined})
}

watch(() => api.createState.visible, value => {
  if (!value) {
    getTree();
  }
})

onMounted(() => {
  api.onListPage();
  getTree();
});
</script>

<style scoped lang="scss">

</style>
